<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";

export default {
  name: "tube-example",
  data() {
    return{
      scene:null,
      camera:null,
      cameraCurve:null,
      renderer:null,
      container:null,
      controls:null,
      pathIndex:0,//小车的运动轨迹点索引
      women:null,
      mixer:null,
      hotMaterial:null,
      coldMaterial:null,
      material:null,
      hotOffset: 0,
      coldOffset: 0
    }
  },
  methods:{
    initScene(){
      this.scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(200,200,200);
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(-300,-300,600)
      this.scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      this.scene.add(directionalLight2);
    },
    initHotTube(){
      const path = new THREE.CatmullRomCurve3([
        new THREE.Vector3(60, 60, 0),
        new THREE.Vector3(-60, 60, 10),
        new THREE.Vector3(-60, -60, 0),
        new THREE.Vector3(60, -60, 10),
      ]);
      let geometry1 = new THREE.TubeGeometry(path, 100, 2, 25, false);

      let textureLoader = new THREE.TextureLoader();
      let texture = textureLoader.load('/static/images/hot.png')
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

      this.hotMaterial = new THREE.MeshBasicMaterial({
        map:texture,
        transparent: false,
      }); //材质对象Material
      let mesh1 = new THREE.Mesh(geometry1, this.hotMaterial); //网格模型对象Mesh
      this.scene.add(mesh1); //网格模型添加到场景

      let tubeGeometry2 = new THREE.TubeGeometry(path, 100, 4, 25, false);
      let tubeMaterial2 = new THREE.MeshPhongMaterial({
        color: 0xaaaaaa,
        transparent: true,
        opacity: 0.5,
      });
      let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
      this.scene.add(tube2);
    },

    initBox(){
      let computerGeometry = new THREE.BoxGeometry( 10, 10, 10);
      let computerMaterial = new THREE.MeshPhongMaterial({
        color: 0x0000ff,
      });
      let computer = new THREE.Mesh(computerGeometry, computerMaterial);
      computer.position.set(60, 60, 0);
      this.scene.add(computer);

      let windGeometry = new THREE.BoxGeometry( 10, 10, 10);
      let windMaterial = new THREE.MeshPhongMaterial({
        color: 0xff0000,
      });
      let wind = new THREE.Mesh(windGeometry, windMaterial);
      wind.position.set(60, -60, 10);
      this.scene.add(wind);
    },

    initColdTube(){
      const path = new THREE.CatmullRomCurve3([
        new THREE.Vector3(60, 60, 0),
        new THREE.Vector3(180, 60, 10),
        new THREE.Vector3(180, -60, 0),
        new THREE.Vector3(60, -60, 10),
      ]);
      let geometry1 = new THREE.TubeGeometry(path, 100, 2, 25, false);

      let textureLoader = new THREE.TextureLoader();
      let texture = textureLoader.load('/static/images/cold.png')
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

      this.coldMaterial = new THREE.MeshBasicMaterial({
        map:texture,
        transparent: false,
      }); //材质对象Material
      let mesh1 = new THREE.Mesh(geometry1, this.coldMaterial); //网格模型对象Mesh
      this.scene.add(mesh1); //网格模型添加到场景

      let tubeGeometry2 = new THREE.TubeGeometry(path, 100, 4, 25, false);
      let tubeMaterial2 = new THREE.MeshPhongMaterial({
        color: 0xaaaaaa,
        transparent: true,
        opacity: 0.5,
      });
      let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
      this.scene.add(tube2);
    },
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#FFFFFF', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度
    },
    initAnimate() {
      this.hotOffset ++;
      this.coldOffset --;
      this.hotMaterial.map.offset.x =  0.05 * this.hotOffset;
      this.hotMaterial.map.repeat.set(10, 1);

      this.coldMaterial.map.offset.x =  0.05 * this.coldOffset;
      this.coldMaterial.map.repeat.set(10, 1);
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(this.scene, this.camera);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initLight();
      this.initRenderer();
      this.initControl();
      this.initHotTube();
      this.initColdTube();
      this.initBox();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
  }
}
</script>

<style scoped>
#container{
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}

</style>
